<!--  -->
<template>
 <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        mode="default" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="content"
                        :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
                </div>
</template>

<script lang='ts' setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { reactive,watch, toRefs,defineEmits, ref,defineProps,onMounted, onBeforeUnmount, shallowRef } from 'vue'

import { useUserStore } from '../store/user';
import { storeToRefs } from 'pinia';

// const props=defineProps({
//     modelValue:{
//         type:String
//     }
// })

const emit=defineEmits(['update:modelValue'])

const store=useUserStore();

const {token}=storeToRefs(store);

const uploadUrl = import.meta.env.VITE_BASE_URL + "upload/add";
const imgBaseUrl = ref(import.meta.env.VITE_IMG_URL);
const headers = { Authorization: token.value }
//富文本编辑器
 

 const content = defineModel();

 
// const content=ref("");

// watch(()=>props.modelValue,(newValue)=>{

//     content.value=newValue;
    
// })
 



// watch(content,(newValue)=>{
 
//      emit('update:modelValue',newValue);
    

// },{})



const editorRef = shallowRef()
const toolbarConfig = {}
type InsertFnType = (url: string, alt: string, href: string) => void
const editorConfig = { 
    placeholder: '请输入内容...',
    MENU_CONF:{
       
        uploadImage:{
            fieldName: 'file',
            headers,
            server: uploadUrl,
            customInsert(res: any, insertFn: InsertFnType) {  // TS 语法

                console.log(1111,res);

                insertFn(imgBaseUrl.value+ res.data,"","")
                
    // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果

        // 从 res 中找到 url alt href ，然后插入图片
        // insertFn(url, alt, href)
    },
        }
    }


}
 


onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor: any) => {
    editorRef.value = editor 
}
 
//富文本编辑器 end
</script>
<style scoped>
</style>